<!doctype html>
<html class="no-js" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!--这meta的作用就是删除默认的苹果工具栏和菜单栏-->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!--网站开启对web app程序的支持-->
    <meta name="apple-touch-fullscreen" content="yes">
    <!--在web app应用下状态条（屏幕顶部条）的颜色-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <!--移动web页面是否自动探测电话号码-->
    <meta http-equiv="x-rim-auto-match" content="none">
    <!--移动端版本兼容 start -->
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"
          name="viewport"/>
    <!--移动端版本兼容 end -->
    <title>支付宝扫码支付</title>

    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" th:href="@{/img/favicon.png}">

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" th:href="@{/img/app-icon72x72@2x.png}">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="apple-touch-icon-precomposed" th:href="@{/img/app-icon72x72@2x.png}">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" th:content="@{/img/app-icon72x72@2x.png}">
    <meta name="msapplication-TileColor" content="#0e90d2">

    <link rel="stylesheet" th:href="@{/css/amazeui.min.css}">
    <link rel="stylesheet" th:href="@{/css/wx.css}">
    <meta name="__hash__" content="a7f55f8c2998c0e892ee07994c6c48a6_9564af55d8ce035f4603db35383c232e"/>
</head>
<script th:src="@{/js/qrcode.min.js}"></script>
<script th:src="@{/js/jquery.min.js}"></script>
<body>
<style>
    .qrcodeImg img {
        display: inline !important;
    }
</style>
<header class="alipay">
    <h1><a href="#" class="am-text-ir am-center">支付宝支付</a></h1>
</header>
<div class="am-g am-g-fixed am-margin-vertical wx-box">
    <div class="am-u-md-8 am-u-sm-12 am-u-sm-centered am-margin-vertical am-text-center">
    </div>

    <div class="am-u-md-8 am-u-sm-12 am-u-sm-centered am-margin-vertical am-text-center"><p class="am-text-xxxl"
                                                                                            th:text="'￥' + ${channelOrder.amount}"></p>
    </div>
    <div class="am-u-md-8 am-u-sm-12 am-u-sm-centered am-margin-vertical am-text-center wx-code" id="img">
        <div id="qrcode" class="qrcodeImg">
        </div>
    </div>
    <div class="tps_btn" style="padding-top: 10px;">
        <a href="javascript:;"
           style="color: #fff;text-decoration: none; text-align: center;padding: .55rem 0; display: inline-block; width: 41%; border-radius: .3rem; font-size: 14px;background-color: #428bca; border: 1px solid #428bca;letter-spacing:normal;font-weight: normal">立即启动支付宝APP支付</a>
    </div>
    <div class="tps_btn" style="padding-top: 10px;">
        <a th:href="${qrcode}" target="_blank"
           style="color: #fff;text-decoration: none; text-align: center;padding: .55rem 0; display: inline-block; width: 41%; border-radius: .3rem; font-size: 14px;background-color: #428bca; border: 1px solid #428bca;letter-spacing:normal;font-weight: normal">复制付款地址</a>
    </div>
    <div class="am-u-md-8 am-u-sm-12 am-u-sm-centered am-margin-vertical am-text-center" >
        <div style="color: red">付款须知: 请勿修改付款金额,否则上分不成功!</div>
        <div class="foot">
            <p>优先使用支付宝扫描二维码以完成支付</p>
            <p>手机用户可点击上面的启动支付宝按钮支付</p>
            <p>或复制链接到给支付宝好友,然后点击链接完成付款</p>
        </div>
    </div>
    <div class="am-u-md-8 am-u-sm-12 am-u-sm-centered am-margin-vertical am-text-center">
        <hr>
        <div class="foot">
            <div class="am-text-center" th:text="'支付订单号：' + ${channelOrder.childOrderno}"></div>
        </div>
        <hr>
        <div class="foot">
            <div class="am-text-center"
                 th:text="'订单时间：' +${#calendars.format(channelOrder.createTime,'yyyy-MM-dd HH:mm:ss')}"></div>
        </div>
        <hr>
        <div class="foot">
            <div class="am-text-center">请在订单提交后3分钟内完成支付</div>
        </div>
        <hr>
    </div>
</div>

<script th:inline="javascript">
    var qrcodeStr = [[${qrcode}]];
    var qrcode = new QRCode(document.getElementById("qrcode"), {
        width: 210,
        height: 210
    });

    function makeCode() {
        qrcode.makeCode(qrcodeStr);
    }

    if (qrcodeStr == 'success') {
        $('#img').html('<div style="color: red;font-size: 25px;">订单已成功!</div>')
    } else {
        makeCode();
        // 定时器
        var interval = window.setInterval(function () {
            var orderId = [[${channelOrder.orderId}]];
            var url = "../orderStatus/" + orderId;
            $.get(url, function (data) {
                if (data.data.successTime) {
                    window.clearInterval(interval);
                    $('#img').html('<div style="color: red;font-size: 25px;">支付成功!</div>')
                    // 跳转地址
                } else if (data.data.orderStatus == '4') {
                    window.clearInterval(interval);
                    $('#img').html('<div style="color: red;font-size: 25px;">订单超时!</div>')
                    // 跳转地址
                }
            })
        }, 5000)
    }
</script>
</body>
</html>